
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Context menu</title>
 <style type="text/css">
   	html, body {
	  height: 100%;
	  margin: 0;
	  padding: 1px;
	  overflow:auto;
	}
	#addressBar{
		padding:10px;
		overflow: hidden;
	}
	#bounded {
		border:1px solid;
		overflow: hidden;
	}
	#btnHide{
		position:absolute;
		/*opacity:0.1;
		filter:alpha(opacity=10);*/
		background-image:url(../images/hideControl.png);
		border: 2px solid ;
		width:15px;
		height:20px;
	}
	#btnHide:hover {
		opacity:1.0;
		filter:alpha(opacity=100); /* For IE8 and earlier */
	}
	#btnShow{
		margin-left:20px;
		height:30px;
	}
	#btnSearch{
		width: 70px
	}
	#direction{
		position:relative;
		height: 100%;
		float: left;
		width: 0%;
		
		overflow:hidden;
		
	}
	#direct_search_bar{
		border-bottom:1px solid;
		height: 100px;
		width:0px;
		background:#DDF8FF;
		overflow:hidden;
	}
	
	#directions_panel {
		
		padding-top:20px;
		width:100%;
		
		overflow:scroll;
	}
	
	
	#FindAddress{
		width:500px;
		margin-left:50px;
		height:30px;
	}
	#map_bound{
		border-left:1px solid;
		position:relative;
		width:100%;
		height:100%;
	}
	#map_canvas {
		
		width:100%;
		height: 100%;
		
	}
	.div1,.div2 {position:absolute;}
	#btnShow_Direction_Bar{
		
		background:url(../images/displayControl.PNG);
		border:2px solid;
		width: 18px;
		height:20px;
		top: 0;
		left: 0;
		/*opacity:0.7;
		filter:alpha(opacity=70); /* For IE8 and earlier */
		z-index:1;
	}
	#btnShow_Direction_Bar:hover {
		opacity:1.0;
		filter:alpha(opacity=100); /* For IE8 and earlier */
	}
	
.context_menu{
	background-color:white;
	border:1px solid gray;
}
.context_menu_item{
	padding:3px 6px;
}
.context_menu_item:hover{
	background-color:#CCCCCC;
}
.context_menu_separator{
	background-color:gray;
	height:1px;
	margin:0;
	padding:0;
}
#clearDirectionsItem, #getDirectionsItem{
	display:none;
}
    </style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery/ContextMenu.js"></script>

<script type="text/javascript">
	var firstRun=true;
	var _REQUEST = {};
	var geocoder;
	var map;
	var directionDisplay;
	var directionsService = new google.maps.DirectionsService();
	$(document).ready(function() {
			$("#bounded").height($("body").height() - $("#addressBar").height() -20);
			$("#FindAddress").val(_REQUEST['diadiem']);
                        $("#start").val(_REQUEST['diadiem']);
			setTimeout(function() {
				codeAddress();
			}, 200);
			document.getElementById("btnShow_Direction_Bar").title="Display Control Panel";
			document.getElementById("btnHide").title="Hide Control Panel";
			document.getElementById("start").title="Start Point";
			document.getElementById("end").title="End Point";
			
		});
function initialize(){
	geocoder = new google.maps.Geocoder();
				
	directionsDisplay = new google.maps.DirectionsRenderer();
	var mapOptions = {
			  zoom: 5,
			  center: new google.maps.LatLng(16.509833,107.314453),
			  mapTypeId: google.maps.MapTypeId.ROADMAP,
			  mapTypeControl: true,
			  mapTypeControlOptions: {
				  style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
				  position: google.maps.ControlPosition.TOP_RIGHT
			  },
			  panControl: true,
			  panControlOptions: {
				  position: google.maps.ControlPosition.LEFT_CENTER
			  },
			  zoomControl: true,
			  zoomControlOptions: {
				  style: google.maps.ZoomControlStyle.LARGE,
				  position: google.maps.ControlPosition.LEFT_CENTER
			  },
			  scaleControl: true,
			  scaleControlOptions: {
				  position: google.maps.ControlPosition.BOTTOM_LEFT
			  },
			  streetViewControl: true,
			  streetViewControlOptions: {
				  position: google.maps.ControlPosition.LEFT_CENTER
			  }
			}
	map=new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
	directionsDisplay.setMap(map);
	directionsDisplay.setPanel(document.getElementById('directions_panel'));
	var directionsRendererOptions={};
	directionsRendererOptions.draggable=false;
	directionsRendererOptions.hideRouteList=true;
	directionsRendererOptions.suppressMarkers=false;
	directionsRendererOptions.preserveViewport=false;
	var directionsRenderer=new google.maps.DirectionsRenderer(directionsRendererOptions);
	var directionsService=new google.maps.DirectionsService();
	
	var contextMenuOptions={};
	contextMenuOptions.classNames={menu:'context_menu', menuSeparator:'context_menu_separator'};
	
	//	create an array of ContextMenuItem objects
	//	an 'id' is defined for each of the four directions related items
	var menuItems=[];
	menuItems.push({className:'context_menu_item', eventName:'directions_origin_click', id:'directionsOriginItem', label:'Directions from here'});
	menuItems.push({className:'context_menu_item', eventName:'directions_destination_click', id:'directionsDestinationItem', label:'Directions to here'});
	menuItems.push({className:'context_menu_item', eventName:'clear_directions_click', id:'clearDirectionsItem', label:'Clear directions'});
	menuItems.push({className:'context_menu_item', eventName:'get_directions_click', id:'getDirectionsItem', label:'Get directions'});
	//	a menuItem with no properties will be rendered as a separator
	menuItems.push({});
	menuItems.push({className:'context_menu_item', eventName:'zoom_in_click', label:'Zoom in'});
	menuItems.push({className:'context_menu_item', eventName:'zoom_out_click', label:'Zoom out'});
	menuItems.push({});
	menuItems.push({className:'context_menu_item', eventName:'center_map_click', label:'Center map here'});
	contextMenuOptions.menuItems=menuItems;
	
	var contextMenu=new ContextMenu(map, contextMenuOptions);
	
	google.maps.event.addListener(map, 'rightclick', function(mouseEvent){
		contextMenu.show(mouseEvent.latLng);
	});
	
	//	create markers to show directions origin and destination
	//	both are not visible by default
	var markerOptions={};
	markerOptions.icon='http://www.google.com/intl/en_ALL/mapfiles/markerA.png';
	markerOptions.map=null;
	markerOptions.position=new google.maps.LatLng(0, 0);
	markerOptions.title='Directions origin';
	
	var originMarker=new google.maps.Marker(markerOptions);
	
	markerOptions.icon='http://www.google.com/intl/en_ALL/mapfiles/markerB.png';
	markerOptions.title='Directions destination';
	var destinationMarker=new google.maps.Marker(markerOptions);
	
	//	listen for the ContextMenu 'menu_item_selected' event
	google.maps.event.addListener(contextMenu, 'menu_item_selected', function(latLng, eventName){
		switch(eventName){
			case 'directions_origin_click':
				
				originMarker.setPosition(latLng);
				if(!originMarker.getMap()){
					originMarker.setMap(map);
				}
				var point = originMarker.getPosition();
				  window.setTimeout(function(){
					map.panTo(point);
					document.getElementById("start").value = point.lat()+","+point.lng();
					
				  }, 100);
				break;
			case 'directions_destination_click':
				destinationMarker.setPosition(latLng);
				if(!destinationMarker.getMap()){
					destinationMarker.setMap(map);
				}
				var point = destinationMarker.getPosition();
				  window.setTimeout(function(){
					map.panTo(point);
					
					document.getElementById("end").value =	point.lat()+","+point.lng();
				  }, 100);
				break;
			case 'clear_directions_click':
				directionsRenderer.setMap(null);
				//	set CSS styles to defaults
				document.getElementById('clearDirectionsItem').style.display='';
				document.getElementById('directionsDestinationItem').style.display='';
				document.getElementById('directionsOriginItem').style.display='';
				document.getElementById('getDirectionsItem').style.display='';
				break;
			case 'get_directions_click':
				var directionsRequest={};
				directionsRequest.destination=destinationMarker.getPosition();
				directionsRequest.origin=originMarker.getPosition();
				directionsRequest.travelMode=google.maps.TravelMode.DRIVING;
				
				directionsService.route(directionsRequest, function(result, status){
					if(status===google.maps.DirectionsStatus.OK){
						//	hide the origin and destination markers as the DirectionsRenderer will render Markers itself
						originMarker.setMap(null);
						destinationMarker.setMap(null);
						directionsRenderer.setDirections(result);
						directionsRenderer.setMap(map);
						directionsDisplay.setDirections(result);
						//	hide all but the 'Clear directions' menu item
						document.getElementById('clearDirectionsItem').style.display='block';
						document.getElementById('directionsDestinationItem').style.display='none';
						document.getElementById('directionsOriginItem').style.display='none';
						document.getElementById('getDirectionsItem').style.display='none';
					} else {
						alert('Sorry, the map was unable to obtain directions.\n\nThe request failed with the message: '+status);
					}
				});
				$("#panel").show();
				show();	
				break;
			case 'zoom_in_click':
				map.setZoom(map.getZoom()+1);
				break;
			case 'zoom_out_click':
				map.setZoom(map.getZoom()-1);
				break;
			case 'center_map_click':
				map.panTo(latLng);
				break;
		}
		if(originMarker.getMap() && destinationMarker.getMap() && document.getElementById('getDirectionsItem').style.display===''){
			//	display the 'Get directions' menu item if it is not visible and both directions origin and destination have been selected
			document.getElementById('getDirectionsItem').style.display='block';
		}
	});
}
function codeAddress() {
			var address = document.getElementById("FindAddress").value;
		
			geocoder.geocode( { 'address': address}, function(results, status) {
				  if (status == google.maps.GeocoderStatus.OK) {
					map.setCenter(results[0].geometry.location);
					map.setZoom(12);
					var marker = new google.maps.Marker({
						map: map,
						position: results[0].geometry.location
					});
				  } else {
					alert("Geocode was not successful for the following reason: " + status);
				  }
			});
			
			
		}
		function showdirect_bar()
		{
			$("#panel").show();
			show();
			hide_btnShow_bar();
			
		}
      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
		$("#panel").show();
		show();	
      }
	  function show()
	  {
	  		var hide=$("#btnHide");
			var map=$("#map_canvas");
			var direct = $("#direction"); 
			var direct_bar=$("#direct_search_bar");
			var panel = $("#directions_panel"); 
			direct.animate({width: "225px"});		
			direct_bar.animate({width:"100%"});
			panel.animate({width:"100%"});
			$("#panel").height($("#bounded").height() - $("#direct_search_bar").height());
			hide.animate({top: "0px"});
			hide.animate({right:  "0px"});
			map.animate({width: ($("#bounded").width()-230)+"px"});
					
	  }
	  function hide()
	  {
			var map=$("#map_canvas");
			var direct = $("#direction"); 
			var direct_bar=$("#direct_search_bar");
			var panel = $("#panel"); 
			var btn=$("#btnShow_Direction_Bar");
			direct.animate({width:"0%"});		
			direct_bar.animate({width:"0%"});
			panel.hide();
			map.animate({width: ($("#bounded").width()-8)+"px"});
			
			btn.animate({width :"18px"});
			
			
	  }
	  function hide_btnShow_bar()
	  {
	  		var btn=$("#btnShow_Direction_Bar");
			btn.animate({width :"0px"});
	  }

	function parseQuery() {
		var url = document.URL;
		var ind = url.indexOf("?");
		
		if (ind >= 0) {
			var queryString = url.substr(ind+1) + "&";
			
			while ((ind = queryString.indexOf("&")) >= 0) {
				var req = queryString.substr(0, ind);
				queryString = queryString.substr(ind+1);
				
				if ((ind = req.indexOf("=")) >= 0) {
					var key = req.substr(0,  ind);
					var value = req.substr(ind+1);
					
					_REQUEST[decodeURIComponent(key)] = decodeURIComponent(value).replace(/\+/g, " ");
				}
			}
		}
}

	
	parseQuery();
</script>

</head>
<body style="margin:0px; padding:0px;" onLoad="initialize();">
 <div id="addressBar">
				<strong><font size="+2"></font></strong>
				<input type="text" id="FindAddress" value="" >
				<input name="button" type="button" id="btnShow" onClick=" codeAddress()" value="GO" >
				
		</div>
		<div id="bounded">
			<div  id="direction">
				<div id="direct_search_bar">
					<div style="margin-top:15px">
						<strong style="margin-left:10px; width:50px">Start:</strong><input type="text" id="start" value="" ><br>
						<strong style="margin-left:10px; width:50px">End   :</strong><input type="text" id="end" value=""  ><br>
					</div>
					<div  align="right" style="margin-top:10px">
						<input id="btnSearch" type="button" onClick="calcRoute();" value="search">
						<div id="btnHide" onClick="hide()"></div>
					</div>
				</div>
				<div id="panel" style="overflow:auto"> 
					<div id="directions_panel"></div>
				</div>
			</div>
			<div id="map_bound">
				<div id='btnShow_Direction_Bar' class="div1" onClick=" showdirect_bar()"></div>
				<div id="map_canvas" class="div2"></div>
			</div>
		</div>
		

</body>
</html>
